今日將介紹4種 Introspection()函數:
5.map-merge($map1,$map2)函數
6.map-remove($map,$key)函數
7.keywords($args…)函數
將兩個map合併,得到新的map。
例如:
// scss //
$color: (
text: #f36,
link: #f63,
border: #ddd,
backround: #fff
);
$typo:(
font-size: 12px,
line-height: 1.6
);
$merge: map-merge($color,$typo);
.newsmap{
color:map-get($merge,text);
typo:map-get($merge,font-size);
newmap:inspect($merge);
}
編|
譯| 有些文件寫到因為map不能轉純css所以使用inspect產生字符串。
後|
V
// css //
.newsmap {
color: #f36;
typo: 12px;
newmap: (
text: #f36,
link: #f63,
border: #ddd,
backround: #fff,
font-size: 12px,
line-height: 1.6);
}
例如:
// scss //
$color: (
text: #f36,
link: #f63,
border: #ddd,
backround: #fff
);
$typo:(
font-size: 12px,
line-height: 1.6,
border: #aaa,
backround: #bbb
);
$merge: map-merge($color,$typo);
.newsmap{
color:map-get($merge,text);
typo:map-get($merge,font-size);
newmap:inspect($merge);
}
編|
譯| $key值 border、backround 皆在兩表中出現,則以$map2取代$map1。
後|
V
// css //
.newsmap {
color: #f36;
typo: 12px;
newmap: (
text: #f36,
link: #f63,
border: #aaa,
backround: #bbb,
font-size: 12px,
line-height: 1.6);
}
刪除當前 $map 中的某一個 $key,從而得到一個新的 map。
例如:
// scss //
$map-colors: (
RED: #ff1500,
ORANGE: #ff7b00,
YELLOW: #fcda01,
GREEN: #00ff2a,
BLUE: #008cf8
);
$remove:map-remove($map-colors,RED);
.newmap{
remove:inspect($remove);
}
編|
譯| 刪除 $key值RED 。
後|
V
// css //
.newmap {
remove: (
ORANGE: #ff7b00,
YELLOW: #fcda01,
GREEN: #00ff2a,
BLUE: #008cf8);
}
動態創建map的函數。可通過混合宏或函數的參數創建map。參數需
成對
出現。
其中$args 變成key(會自動去掉$符號),而$args對應的值就是value。
例如:
// scss //
@mixin map($args...){
@debug keywords($args);
}
@include map(
$RED: #ff1500,
$ORANGE: #ff7b00,
$YELLOW: #fcda01,
$GREEN: #00ff2a,
$BLUE: #008cf8
);
編|
譯|
後|
V
DEBUG: (RED: #ff1500, ORANGE: #ff7b00, YELLOW: #fcda01, GREEN: #00ff2a, BLUE: #008cf8)